<template>
  <div class="wrapper" :class="type">
    <div class="title_da">立即咨询<span>免费提供店铺评估</span></div>
    <div class="title_xiao">已提交<span>371</span>人<br><span>30</span>分钟内客服与您联系</div>
    <van-form @submit="onSubmit">
      <div class="wrappericon">
        <div class="wrappericon_ul">
          <div class="input_name">联系方式</div>
          <van-field v-model="mobile" name="mobile" :rules="[{ required: true, pattern: phone , message: '请输入正确的联系电话' }]" placeholder="请输入联系方式" />
          <div class="input_name">姓名</div>
          <van-field v-model="name" name="name" :rules="[{ required: true, pattern: hanzi , message: '请输入正确的姓名' }]" placeholder="请输入姓名" />
          <div class="input_name">需求</div>
          <van-field name="type" class="radio">
            <template #input>
              <van-radio-group v-model="radio" direction="horizontal">
                <van-radio name="转店">我要转店</van-radio>
                <van-radio name="找店">我要找店</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="city" v-model="city" class="none" />
          <van-field name="from" value="手机站" class="none" />
        </div>
        <van-button round block type="info" native-type="submit" class="experience">
          立即提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'CompanyConsult',
  data () {
    return {
      mobile: '',
      name: '',
      radio: '转店',
      hanzi: /[\u4e00-\u9fa5]/,
      phone: /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/,
      city: sessionStorage.getItem('Dcity')
    }
  },
  props: {
    type: String
  },
  methods: {
    onSubmit (values) {
      this.$axios.post(process.env.API_HOST + '/api/vip/feedback', values
      ).then(this.onSubmitSucc)
        .catch(error => console.log(error))
    },
    onSubmitSucc (res) {
      if (res.data.code === 1) {
        this.$toast('提交成功')
        setTimeout(function () {
          this.$router.push('/')
        }, 1000)
      } else {
        this.$toast('请检查网络后重试')
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
  width 100%
  border-radius 5px
  padding 0rem /* 26/50 */ .4rem 0rem /* 28/50 */ .4rem
  position relative
  margin-top 1.06rem /* 53/50 */
  .title_da
    font-size .7rem /* 35/50 */
    height 1.1rem /* 55/50 */
    line-height 1.1rem /* 55/50 */
    text-align center
    font-weight 800
    color rgba(0,0,0,.9)
    span
      font-size .46rem /* 23/50 */
      line-height .5rem
      vertical-align middle
      margin-left .3rem /* 15/50 */
  .title_xiao
    font-size .28rem /* 14/50 */
    text-align center
    color rgba(0,0,0,.5)
    line-height .46rem /* 23/50 */
    margin-bottom .4rem /* 20/50 */
    span
      font-size .32rem /* 16/50 */
      font-weight bold
  .title_img
    width 100%
    height .8rem /* 40/50 */
    line-height .8rem /* 40/50 */
    background-image url('../../../assets/img/one/iconbg.png')
    background-size 6.34rem /* 317/50 */ 100%
    background-repeat no-repeat
    background-position center
    margin-top .84rem /* 42/50 */
    display flex
    position relative
    text-align center
    div
      width 100%
      font-size .48rem /* 24/50 */
      color #fff
      font-weight bold
  .title_imgX
    text-align center
    font-size .28rem /* 14/50 */
    margin-top .3rem /* 15/50 */
    margin-bottom .48rem /* 24/50 */
  .wrappericon
    width 100%
    height 7.6rem /* 345/50 */
    border-radius .1rem /* 5/50 */
    padding-top .06rem /* 3/50 */
    .wrappericon_ul
      width 100%
      height 7.5rem /* 340/50 */
      background #ffffff
      border-radius .1rem /* 5/50 */
      padding-bottom .7rem /* 35/50 */
      padding .7rem /* 35/50 */ .3rem /* 15/50 */
      .input_name
        font-weight bold
        font-size .26rem /* 13/50 */
        margin-bottom .2rem /* 10/50 */
      .van-cell:after
        border-bottom 0px
      .van-cell
        width 100%
        min-height .88rem /* 44/50 */
        border-radius .1rem /* 5/50 */
        border 1px solid rgba(0,0,0,.2)
        margin-bottom .4rem /* 20/50 */
      .radio
        border 0px
      .van-radio-group
        width 100%
        .van-radio
          width 50%
          height .5rem /* 15/50 */
          line-height .5rem /* 15/50 */
          font-size .32rem /* 16/50 */
          margin-right 0px
          /deep/ .van-radio__icon
            height .26rem
            .van-icon
              width .26rem /* 13/50 */
              height .26rem /* 13/50 */
          /deep/ .van-radio__icon--checked .van-icon
            border 0px
          /deep/ .van-icon-success::before
            content: ""
  .experience
    width 84%
    position absolute
    left 8%
    bottom -.34rem /* 17/50 */
    height 1rem /* 45/50 */
    line-height 1rem
    text-align center
    border-radius .1rem /* 5/50 */
    font-size .4rem /* 20/50 */
    font-weight bold
    color #fff
.one
  .title_img
    width 100%
    background-image url('../../../assets/img/one/iconbg.png')
  .wrappericon
    background #d77d50
  /deep/ .van-radio__icon--checked .van-icon
    background linear-gradient(-34deg, #DE570C, #B9480A)
    box-shadow 1px 1px 2px 0px rgba(185, 72, 10, 0.3)
  .experience
    background #B9480A
    border 2px solid #AD4309
    box-shadow 0px 3px 0px 0px rgba(126, 47, 4, 0.3)
.two
  .title_img
    width 100%
    background-image url('../../../assets/img/two/iconbg.png')
  .wrappericon
    background #E66D71
  /deep/ .van-radio__icon--checked .van-icon
    background linear-gradient(-34deg, #E13238, #EC070F)
    box-shadow 1px 1px 2px 0px rgba(195, 8, 14, 0.3)
  .experience
    background #C3080E
    border 2px solid #B4070B
    box-shadow 0px 3px 0px 0px rgba(167, 5, 9, 0.3)
.there
  .title_img
    width 100%
    background-image url('../../../assets/img/there/iconbg.png')
  .wrappericon
    background #7AA1F1
  /deep/ .van-radio__icon--checked .van-icon
    background linear-gradient(-34deg, #0A70B8, #085B95)
    box-shadow 1px 1px 2px 0px rgba(8, 91, 149, 0.3)
  .experience
    background #085B95
    border 2px solid #095194
    box-shadow 0px 3px 0px 0px rgba(93, 162, 223, 0.5)
</style>
